﻿@page
@model FytSoa.Web.Pages.FytAdmin.Shop.SpectTypeModifyModel
@{
    ViewData["Title"] = "类别编辑";
    Layout = "~/Pages/FytAdmin/_Layout.cshtml";
}
<style>
    .layui-transfer-active button.layui-btn {
        box-shadow: 1px 2px 10px 0 rgba(255,255,255,.5);
    }
</style>
<div id="app">
    <form class="layui-form form-cus" action="" v-if="m">
        <div class="layui-form-item">
            <label class="layui-form-label">归属分类</label>
            <div class="layui-input-block">
                <select id="column" name="column" lay-verify="required" lay-verType="tips" lay-search="">
                    <option value="">请选择分类</option>
                    <option :value="it.id" v-for="it in list">{{it.title}}</option>
                </select>
            </div>
        </div>
        <div style="padding:10px 0px 10px 30px;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div id="brand"></div>
                </div>
                <div class="layui-col-md6">
                    <div id="spect"></div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align:center;margin-top:20px;">
                <button class="layui-btn" lay-submit="" lay-filter="submit" id="submit"><i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-hide"></i>立即提交</button>
                <button type="button" class="layui-btn layui-btn-primary btn-open-close">取消</button>
            </div>
        </div>
    </form>
</div>
@section Scripts{
    <script>
        var oc, vm = new Vue({
            el: '#app',
            data: {
                m: {},
                list:[]
            }
        });
        layui.config({
            base: '/themes/js/modules/'
        }).use(['layer', 'jquery', 'common', 'form', 'transfer'], function () {
            var form = layui.form, $ = layui.jquery, os = layui.common, transfer = layui.transfer;
            vm.m.guid = os.getUrlParam('guid');
            var index = parent.layer.getFrameIndex(window.name);

            oc = {
                init() {
                    os.load();
                    os.ajax('api/shop/spect/type/model', {parm:vm.m.guid}, function (res) {
                        if (res.statusCode === 200) {
                            vm.list = res.data.list;
                            vm.m = res.data.model;
                            vm.$nextTick(function () {
                                $("#column").val(vm.m.columnGuid);
                                form.render();
                            });
                            //判断是否修改，如果是，赋值给右侧
                            var brandRightVal = [],spectRightVal=[];
                            if (vm.m.brandJson) {
                                $.each(JSON.parse(vm.m.brandJson), function (i, item) {
                                    brandRightVal.push(item.value);
                                });
                            }
                            if (vm.m.spectJson) {
                                $.each(JSON.parse(vm.m.spectJson), function (i, item) {
                                    spectRightVal.push(item.value);
                                });
                            }
                            //前端构建所属数据结构
                            var brandJson = [];
                            $.each(res.data.brand, function (i, item) {
                                brandJson.push({ value: item.guid, title: item.brandName});
                            });
                            var spectJson = [];
                            $.each(res.data.spect, function (i, item) {
                                spectJson.push({ value: item.guid, title: item.spectName });
                            });
                            transfer.render({
                                elem: '#brand'
                                , title: ['品牌列表', '已关联品牌']
                                , data: brandJson
                                , height: 380
                                , value: brandRightVal
                                , id:'brand'
                            });
                            transfer.render({
                                elem: '#spect'
                                , title: ['规格列表', '已关联规格']
                                , data: spectJson
                                , height: 380
                                , value: spectRightVal
                                , id: 'spect'
                            });
                            os.loadClose();
                        } else {
                            os.error(res.message);
                            os.loadClose();
                        }
                    });
                }                

            };
            oc.init();
            //监听提交
            form.on('submit(submit)', function (data) {
                if (!data.field.column) {
                    os.error('请选择关联分类');
                    return false;
                }
                if (transfer.getData('brand').length === 0) {
                    os.error('请选择关联品牌');
                    return false;
                }
                if (transfer.getData('spect').length === 0) {
                    os.error('请选择关联规格');
                    return false;
                }
                $('#submit').attr('disabled', true).find('i').removeClass('layui-hide');
                var urls = "api/shop/spect/type/add";
                if (vm.m.guid) {
                    urls = "api/shop/spect/type/update";
                }
                vm.m.columnGuid = data.field.column;
                vm.m.brandJson = JSON.stringify(transfer.getData('brand'));
                vm.m.spectJson = JSON.stringify(transfer.getData('spect'));
                os.ajax(urls, vm.m, function (res) {
                    $('#submit').attr('disabled', false).find('i').addClass('layui-hide');
                    if (res.statusCode == 200) {
                        parent.layer.close(index);
                    }
                    else {
                        os.error(res.message);
                    }
                });
                return false;
            });
            $(".btn-open-close").on('click', function () {
                parent.layer.close(index);
            });
        });
    </script>
}
